{% extends "admin/pub/base.html" %}

{% block title %}
<title>会员管理</title>
{% endblock %}

{% block con-header %}
{% endblock %}

{% block content-body %}
<div class="widget am-cf">
  <div class="widget-head am-cf">
    <div class="widget-title  am-cf"> 会员列表</div></div>
  <div class="widget-body  am-fr">
    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
      <div class="am-form-group">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <button type="button" class="am-btn am-btn-default am-btn-success">
              <span class="am-icon-plus"></span>新增</button>
            <button type="button" class="am-btn am-btn-default am-btn-secondary">
              <span class="am-icon-save"></span>保存</button>
            <button type="button" class="am-btn am-btn-default am-btn-warning">
              <span class="am-icon-archive"></span>审核</button>
            <button type="button" class="am-btn am-btn-default am-btn-danger">
              <span class="am-icon-trash-o"></span>删除</button>
          </div>
        </div>
      </div>
    </div>

    <form>
      <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
        <div class="am-form-group tpl-table-list-select">
          <select name="types" data-am-selected="{btnSize: 'sm'}" style="display: none;">
            <option {% if request.GET.types == 'all' %} selected {% endif %} value="all" >全部条件</option>
            <option {% if request.GET.types == 'username' %} selected {% endif %} value="username" >用户名</option>
            <option {% if request.GET.types == 'email' %} selected {% endif %} value="email" >邮箱</option>
            <option {% if request.GET.types == 'phone' %} selected {% endif %} value="phone" >手机号</option>
            <option {% if request.GET.types == 'age' %} selected {% endif %} value="age" >年龄</option>
            <option {% if request.GET.types == 'sex' %} selected {% endif %} value="sex" >性别</option>
            <option {% if request.GET.types == 'status' %} selected {% endif %} value="status" >状态</option>
          </select>

        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
        <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
          <input type="text" class="am-form-field " name="keywords" value="{{ request.GET.keywords }}">
          <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search"></button>
          </span>
        </div>
      </div>
    </form>

    <div class="am-u-sm-12">
      <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
        <thead>
          <tr>
            <th>头像</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>性别</th>
            <th>手机</th>
            <th>注册时间</th>
            <th>状态</th>
            </tr>
        </thead>
        <tbody>
        {% for i in db %}
          <tr class="gradeX">
            <td>
              <img src="{{i.picurl}}" class="tpl-table-line-img" alt=""></td>
            <td class="am-text-middle">{{ i.username }}</td>
            <td class="am-text-middle">{{ i.email }}</td>
            <td class="am-text-middle">{{ i.age }}</td>
            <td class="am-text-middle">{{ i.sex }}</td>
            <td class="am-text-middle">{{ i.phone }}</td>
            <td class="am-text-middle">{{ i.addtime }}</td>
            <td class="am-text-middle">
              <select uid="{{i.id}}" class="user_status" style="color:#000">
                <option value="0" {% if i.status == 0 %} selected {% endif %}>正常</option>
                <option value="1" {% if i.status == 1 %} selected {% endif %}>禁用</option>
              </select>
            </td>
            <td class="am-text-middle">
              <div class="tpl-table-black-operation">
                <a href="{% url 'user_edit' i.id %}">
                  <i class="am-icon-pencil"></i>编辑</a>
                <a href="{% url 'user_del' i.id %}" class="tpl-table-black-operation-del">
                  <i class="am-icon-trash"></i>删除</a>
              </div>
            </td>
          </tr>
        {% endfor %}


          <!-- more data --></tbody>
      </table>
    </div>
    <div class="am-u-lg-12 am-cf">
      <div class="am-fr">
        <ul class="am-pagination tpl-pagination">
          {% load page %}
          {% showpage num request %}
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
  $('.user_status').change(function(){
    var val = $(this).val()
    var id = $(this).attr('uid')
    // 发送请求给后userstatus,不需要获取数据.
    $.get('{% url 'user_status' %}',{uid:id,status:val})
  })
</script>
{% endblock %}